<template>
    <header class="header">
        <span class="back-btn" v-show="backShow"><</span>
        <span>{{title}}</span>
        <span class="more-btn">...</span>
    </header>
</template>

<script>
export default {
    props:{
        backShow:{
            type:Boolean,
            // required:true,
            default:false
        },
        title:{
            type:String,
            require:true
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.header{
    width:100%;
    height:44px;
    line-height: 44px;
    background: #eee;
    position: relative;
    text-align: center;
    .back-btn{
        width: 44px;
        height: 44px;
        position:absolute;
        left:0;
        top:0;
        text-align: center;
    }
    .more-btn{
        width: 44px;
        height: 44px;
        position:absolute;
        right:0;
        top:0;
        text-align: center;
    }
}
</style>
